<template lang="pug">
.header-wrapper
  .header(@click="showDetail")
    //- 头部内容
    .content-wrapper
      .avatar
        img(:src="seller.avatar")
      .content
        .title
          span.brand
          span.name {{seller.name}}
        .description {{seller.description}}/{{seller.deliveryTime}}分钟送到
        .support(v-if='seller&&seller.supports')
          SupportIcon.icon(:size="1" :type="seller.supports[0].type")
          span.desc {{seller.supports[0].description}}
      .support-count-wrapper
        .support-count(v-if='seller&&seller.supports') 
          span.count {{seller.supports.length}}个
          span.icon.iconfont.iconarrowRight
    //- 头部公共
    .bulletin-wrapper
      span.title
      span.content {{seller.bulletin}}
  //- 头部背景
  .background
    img(:src="seller.avatar")
</template>

<script>
import SupportIcon from '~/components/support-icon/support-icon'
export default {
    props: {
        seller: {
            type: Object,
            default() {
                return {}
            }
        }
    },

    data() {
        return {
            size: 1
        }
    },

    //- computed: {
    //-   headStyle: function() {
    //-     return {
    //-       "background-image": url("http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg")
    //-     }
    //-   }
    //- },

    methods: {
      showDetail() {
        // 返回的是一个组件的实例
        this.headerDetailComp = this.headerDetailComp || this.$createHeaderDetail({
            // 如果使用vue的配置项，属性前面添加$
            $props: {
                // 值如果是字符串，可以是响应式的
                seller: 'seller'
            }
        })
        console.log('启动this.headerDetailComp.show')
        console.log(this.headerDetailComp.show)
        this.headerDetailComp.show()
      }
    },
    components: {
        SupportIcon
    }
}
</script>

<style lang="stylus" scoped>
@import "../../static/common/stylus/mixin";
@import "../../static/common/stylus/variable";
.header-wrapper
  position: relative
  width:100%
  height:100%
  .header
    width: 100%
    height:100%
    display: flex
    top:0
    left:0
    background:$color-background-ss
    min-width:0
    flex-direction: column
    color: #fff
    .content-wrapper
      flex: 0 0 80%
      display: flex
      align-items: center
      padding-top: 24px
      .avatar
        flex: 0 0 30%
        text-align:left
        width: 64px
        height: 64px
        img
          margin-left:24px
          vertical-align: middle
          width: 64px
          height: 64px
          border-radius: 4px
      .content
        flex: 0 0 55%
        height: 64px
        .title
          display:block
          vert-align()
          text-align:left
          height: 18px
          margin-top: 2px
          .brand
            display:inline-block
            vertical-align:middle
            bg-image('brand')
            width: 30px
            height: 18px
            background-size: 30px 18px          
          .name
            vertical-align: middle
            margin-left:6px
            font-size: $fontsize-large
            font-weight:bold
        .description
          margin-top:6px
          text-align:left
          font-size:$fontsize-small
          font-weight: 200px
        .support
          margin-top:8px
          text-align:left
          height: 12px
          vert-align()
          .icon
            vertical-align: middle
          .desc
            margin-left: 4px
            vertical-align: middle
            font-size:$fontsize-small-s
      .support-count-wrapper
        flex: 0 0 15%
        position: relative
        height: 24px
        .support-count
          display: inline-block
          position: absolute
          background: rgba(0, 0, 0, 0.2)
          border-radius: 5px
          right:12px
          .count
            margin-left:8px
            font-size:$fontsize-small-s
          .iconfont
            margin-left:2px
            margin-right:6px
            font-size:$fontsize-small-s
            line-height: 24px
    .bulletin-wrapper
      flex: 0 0 20%
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      background: $color-background-sss
      vert-align()
      .title
        display:inline-block
        vertical-align:middle
        margin-left: 12px
        width: 28px
        height: 18px
        background-size: 28px 18px
        bg-image('bulletin')
      .content
        display: inline-block
        //- flex 和overflow同时使用，overflow:hidden会失效
        //- 必须指定宽度，才能启用overflow
        width:85%
        margin-left: 4px
        margin-right: 12px
        vertical-align:middle
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis
        font-size:$fontsize-small
  .background
    position:absolute
    left:0
    top:0
    width:100%
    height:100%
    z-index: -100
    filter: blur(10px)
    img
      width:100%
      height:100%







      

</style>
